<template>
	<div>
		<el-row :gutter="20" class="mgb20">
			<el-col :span="6">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="grid-content grid-con-1">
						<div class="grid-cont-right">
							<div class="grid-num">{{ allData.count1 }}</div>
							<div>进行中项目</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<el-col :span="6">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="grid-content grid-con-2">
						<div class="grid-cont-right">
							<div class="grid-num">{{ allData.count4 }}</div>
							<div>项目总数</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<el-col :span="6">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="grid-content grid-con-3">
						<div class="grid-cont-right">
							<div class="grid-num">{{ allData.count2 }}</div>
							<div>合同总数</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="grid-content grid-con-6">
						<div class="grid-cont-right">
							<div class="grid-num">{{ allData.count3 }}</div>
							<div>非合同总数</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24" style="margin-top: 10px">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<h3 class="table-title">项目进度</h3>
					<div id="table2" class="table-one-sty"></div>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="20" class="mgb20">
			<el-col :span="12" style="margin-top: 10px">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<h3 class="table-title">项目</h3>
					<div id="table1" class="table-sty"></div>
				</el-card>
			</el-col>

			<el-col :span="12" style="margin-top: 10px">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<h3 class="table-title">审批项目</h3>
					<div id="table3" class="table-sty"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import * as echarts from "echarts";

import { ref, reactive, onMounted, getCurrentInstance } from "vue";

import { getEcharts } from "@/api/echarts";

const allData = ref({
	count1: 1,
	count2: 1,
	count3: 1,
	count4: 1,
	table1: [
		{ value: 11, name: "饲养" },
		{ value: 735, name: "自养" },
	],
	table2: Array,

	table3: Array,
	table4: Array,
});

function loadAllTable() {
	echarts.init(document.getElementById("table1")).setOption({
		tooltip: {
			trigger: "item",
		},
		legend: {
			top: "5%",
			left: "center",
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["40%", "70%"],
				avoidLabelOverlap: false,
				padAngle: 5,
				itemStyle: {
					borderRadius: 10,
				},
				label: {
					show: false,
					position: "center",
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: "bold",
					},
				},
				labelLine: {
					show: false,
				},
				data: allData.value.table1,
			},
		],
	});

	// -----------------------------------tanle2------------------------

	echarts.init(document.getElementById("table2")).setOption({
		dataset: {
			source: allData.value.table2,
			//[
			//   ['score', 'amount', 'product'],
			//   [89.3, 80, 'Matcha Latte'],
			//   [57.1, 70, 'Milk Tea'],
			//   [74.4, 60, 'Cheese Cocoa'],
			//   [50.1, 55, 'Cheese Brownie'],
			//   [89.7, 80, 'Matcha Cocoa'],
			//   [68.1, 40, 'Tea'],
			//   [19.6, 20, 'Orange Juice'],
			//   [10.6, 10, 'Lemon Juice'],
			//   [32.7, 0, 'Walnut Brownie']

			// ]
		},
		grid: { containLabel: true },
		xAxis: { name: "%" },
		yAxis: { type: "category" },
		visualMap: {
			orient: "horizontal",
			left: "center",
			min: 0,
			max: 100,
			text: ["100%", "0%"],
			// Map the score column to color
			dimension: 0,
			inRange: {
				color: ["#65B581", "#FFCE34", "#FD665F"],
			},
		},
		series: [
			{
				type: "bar",
				encode: {
					// Map the "amount" column to X axis.
					x: "amount",
					// Map the "product" column to Y axis
					y: "product",
				},
			},
		],
	});

	// -----------------------------------tanle3------------------------
	echarts.init(document.getElementById("table3")).setOption({
		tooltip: {
			trigger: "item",
		},
		legend: {
			top: "5%",
			left: "center",
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["40%", "70%"],
				avoidLabelOverlap: false,
				padAngle: 5,
				itemStyle: {
					borderRadius: 10,
				},
				label: {
					show: false,
					position: "center",
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: "bold",
					},
				},
				labelLine: {
					show: false,
				},
				data: allData.value.table3,
			},
		],
	});
	// -----------------------------------tanle4------------------------

	echarts.init(document.getElementById("table4")).setOption({
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: [
			{
				type: "category",
				data: allData.value.table4.column,
				axisTick: {
					alignWithLabel: true,
				},
			},
		],
		yAxis: [
			{
				type: "value",
			},
		],
		series: [
			{
				name: "Direct",
				type: "bar",
				barWidth: "60%",
				data: allData.value.table4.count,
			},
		],
	});
}

const initData = async () => {
	const res = await getEcharts();
	allData.value = res.data;
};

onMounted(() => {
	initData().then(() => {
		console.log(allData.value);
		loadAllTable();
	});
});
</script>

<style scoped lang="less">
.home {
	display: flex;
	height: 100%;
	width: 100%;
	background-color: #262632;
}

.content {
	margin: 10vh 20px 0;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 16px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}

.cav-info {
	border-radius: 6px;
	overflow: hidden;
}

.table-sty {
	width: 750px;
	height: 300px;
}
.table-one-sty {
	width: 100%;
	height: 300px;
}
.table-title {
	margin-top: 20px;
	align-content: center;
	text-align: center;
}
</style>
